<template>
  <div>
    <div class="clearfix sticky-button">
      <el-row :gutter="20">
        <el-col :span="14" :offset="0">
          <el-input v-model="filterText" class="fitler" placeholder="筛选"
        /></el-col>
        <el-col :span="10" :offset="0">
          <el-button
            class="fl-right"
            size="small"
            type="primary"
            @click="authApiEnter"
            >确 定</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="tree-content">
      <el-tree
        ref="apiTree"
        :data="apiTreeData"
        :default-checked-keys="apiTreeIds"
        :props="apiDefaultProps"
        default-expand-all
        highlight-current
        node-key="onlyId"
        show-checkbox
        :filter-node-method="filterNode"
        @check="nodeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { getAPiList } from "~/api/api";
import { message } from "~/utils/utils.js";
import { getPolicyPathByAuthorityId, UpdateCasbin } from "~/api/casbin";

// props相关
const props = defineProps({
  row: {
    default: function () {
      return {};
    },
    type: Object,
  },
});

const apiDefaultProps = ref({
  children: "children",
  label: "description",
});

// 过滤相关
const filterText = ref("");
const apiTree = ref(null);
const filterNode = (value, data) => {
  if (!value) return true;
  return data.description.indexOf(value) !== -1;
};
watch(filterText, (val) => {
  apiTree.value.filter(val);
});

const apiTreeData = ref([]);
const apiTreeIds = ref([]);
const activeUserId = ref("");

const authApiEnter = async () => {
  const checkArr = apiTree.value.getCheckedNodes(true);
  var casbinInfos = [];
  checkArr &&
    checkArr.forEach((item) => {
      var casbinInfo = {
        path: item.path,
        method: item.method,
      };
      casbinInfos.push(casbinInfo);
    });
  await UpdateCasbin({
    authorityId: activeUserId.value,
    casbinInfos,
  });
  message("设置成功");
};

const init = async () => {
  const allApi = await getAPiList();
  apiTreeData.value = buildApiTree(allApi);

  const casbinRes = await getPolicyPathByAuthorityId({
    authorityId: props.row.authorityId,
  });
  activeUserId.value = props.row.authorityId;
  apiTreeIds.value = [];
  casbinRes &&
    casbinRes.forEach((item) => {
      apiTreeIds.value.push("p:" + item.path + "m:" + item.method);
    });
};
init();

const needConfirm = ref(false);
const nodeChange = () => {
  needConfirm.value = true;
};

// 创建api树方法
const buildApiTree = (apis) => {
  const apiObj = {};
  apis &&
    apis.forEach((item) => {
      item.onlyId = "p:" + item.path + "m:" + item.method;
      if (Object.prototype.hasOwnProperty.call(apiObj, item.apiGroup)) {
        apiObj[item.apiGroup].push(item);
      } else {
        Object.assign(apiObj, { [item.apiGroup]: [item] });
      }
    });
  const apiTree = [];
  for (const key in apiObj) {
    const treeNode = {
      ID: key,
      description: key + "接口",
      children: apiObj[key],
    };
    apiTree.push(treeNode);
  }
  return apiTree;
};
</script>

<style>
.tree-content {
  overflow: auto;
  height: calc(100vh - 100px);
  margin-top: 10px;
}
</style>
